<template>
  <div class="message-container">
    <div :class="['row-container']" :style="rowStyle">
      <div :class="type === 2 ? 'left' : 'right'"></div>
      <span>{{message}}</span>
    </div>
  </div>
</template>

<script setup>
const {message , type} = defineProps(["message" , 'type']);
const rowStyle = {
  backgroundColor: type === 2 ? '#fff' : 'rgb(149, 236, 105)',
}

</script>



<style scoped lang="less">
.row-container {
  padding: 10px;
  border-radius: 5px;
  position: relative;

  .left {
    border: 10px black solid;
    position: absolute;
    left: -17px;

    border-top: 10px solid transparent;
    border-right: 10px solid white;
    border-left: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }

  .right {
    position: absolute;
    width: 0;
    height: 0;
    right: -17px;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-left: 10px solid rgb(149, 236, 105);
    border-bottom: 10px solid transparent;
  }
}
</style>
